// 3. JS逻辑：
const labels = document.querySelectorAll('.form-control label')
// console.log(labels)

// 细节：这里, 通过输出 ->伪数组labels, 查看其 Prototype(原型链)
// 可发现 ->其 "原型链" 上是有 [forEach] 方法的==
labels.forEach(label => {
  label.innerHTML = label.innerText
    .split('')
    .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
    .join('')
})

// 分析：
// ① 将当前表单form中的 label 全部获取到；
// ② 接着, 将 label 中的文字(字符串)进行分割 ->形成 [字符串数组]；
// ③ 根据生成的数组, 采用遍历（letter：每项数据, idx：索引简写）；
// ④ 并且遍历的同时, 采取标签上 <行内样式> 拼接对应的样式 ->根据不同索引号, 决定每个字符串的动画延迟；
// ⑤ 最后, 再通过 "join()" 方法, 将模板转为字符串, 以便渲染到 页面上...

// Extra：
// 如果写成：.map((letter, idx) => `<span>${letter}</span>`)
// 则会变成原先接触过的 ->单纯 label文字 上升效果了！！